import React, {
    useState,
    useRef
} from 'react';
import './category.scss';
import classNames from 'classnames';
import CategoryPane from './categoryPane';
import { Category as CategoryTree } from './categoryProps';
import bem from '@/utils/bem';

export interface CategoryProps {
    // 是否显示图片w
    showImg: boolean,
    isLazy: boolean,
    categoryTree: CategoryTree[],
    onChange: (cate: CategoryTree) => void,
}


// 定义默认 Props
const defaultProps: CategoryProps = {
    showImg: true,
    isLazy: true,
    categoryTree: [],
    onChange: (cate: CategoryTree) => {
        console.log(cate);
    }
   
};

const Category: React.FC<CategoryProps> = (props) => {
    const {
        showImg,
        isLazy,
        categoryTree,
        onChange,
        ...rest
    } = {
        ...defaultProps,
        ...props
    };
    // class name
    const b = bem('category');
    const [activeIndex, setActiveIndex] = useState(0);
    const listRef = useRef<HTMLDivElement>(null);


    const changeTab = (index: number) => {
        if (index == activeIndex) {
            return;
        }

        setActiveIndex(index);
        scrollListTo(index);

        // 触发回调
        onChange(categoryTree[index])

    }

    const scrollListTo = (index: number) => {
        const leftDom = listRef?.current;
        if(!leftDom){
            return;
        }

        const height:number = leftDom.clientHeight / 2;

        const items = leftDom.getElementsByClassName(b('left__item'));

        const panel:any = items[index];

        const top = Math.max(0, panel.offsetTop - height + 25);

        leftDom.scrollTo({
            top: top,
            behavior: 'auto'
        });
    }

    const getCategoryChild = (item: CategoryTree[], i: number) => {
        return item && item[i].children || [];
    }

    // 如果没有数据
    if (!categoryTree?.length) {
        return <div>暂无分类数据</div>;
    }

    return (
        <>
            <div className={b()}>
                {
                    <div className={b('main')}>
                        <div className={b('left')} ref={listRef}>
                            {
                                categoryTree.map((item, index) => (
                                    <div
                                        key={index}
                                        data-index={index}
                                        className={
                                            classNames(b('left__item'), activeIndex == index && b('left__item-checked'))
                                        }
                                        onClick={() => changeTab(index)}
                                    >
                                        {item.cateName}
                                    </div>
                                ))
                            }
                        </div>
                        <CategoryPane 
                            categoryChild={getCategoryChild(categoryTree, activeIndex)}
                            isLazy={isLazy}
                          />
                    </div>
                }
            </div>
        </>
    )
}

export default Category